<template>
  <div>
    <div class="page flex-col justify-between">
      <div class="header flex-col"></div>
      <div class="body flex-col">
        <div class="group_1 flex-col"></div>
        <div class="group_6 flex-row">
          <div class="section_1 flex-col"></div>
          <span class="text_1">开启剧本杀之旅</span>
          <div class="image_2 flex-col"></div>
        </div>

        <button class="button_1 flex-col" @click="phonelogin">
          <div class="image-text_9 flex-row justify-between">
            <span class="text-group_1">手机号登录</span>
          </div>
        </button>
        <button class="button_4 flex-col">
          <span class="text_4" @click="this.$router.push('/dmlogin')"
            >账号登录</span
          >
        </button>
        <!-- 下边策略 -->
        <bottom-policy @phonelogin="phonelogin"></bottom-policy>
      </div>
    </div>
  </div>
</template>
<script>
import BottomPolicy from "./phonelogin/bottomPolicy.vue";
import { Toast } from "vant";
export default {
  data() {
    return {};
  },
  methods: {
    phonelogin() {
      if (!this.$store.state.botChecked) {
        Toast("请阅读并同意下方条款");
      } else {
        this.$router.push("/phonelogin");
      }
    },
  },
  components: { BottomPolicy },
};
</script>
<style scoped>
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 3.75rem;
  height: 8.12rem;
  overflow: hidden;
}

.header {
  width: 3.75rem;
  height: 0.44rem;
}

.image_1 {
  width: 3.745rem;
  height: 0.44rem;
}

.body {
  width: 3.75rem;
  height: 7.68rem;
  overflow-y: auto;
}

.group_1 {
  width: 1.9rem;
  height: 2.14rem;
  background: url("../assets/images/ps3ftm5y5mczhx0ah1kvnse7wtjdzutnpbacd82a4-5b40-4d55-8f14-8f47deb09693.png") -0.115rem -0.005rem
    no-repeat;
  background-size: 2.16rem 2.16rem;
  margin: 0.95rem 0 0 0.925rem;
}

.group_6 {
  height: 0.135rem;
  margin: 0.09rem 0 0 0.925rem;
}

.section_1 {
  width: 0.37rem;
  height: 0.006rem;
  background: url(../assets/images/ps12ty3zb52cukfzqzjzge8gk8l0gr24tgt6bdc9b2b-ed0b-4ff5-8120-f286f7f37084.png)
    0rem -0.005rem no-repeat;
  background-size: 0.375rem 0.01rem;
  margin-top: 0.065rem;
}

.text_1 {
  width: 0.97rem;
  height: 0.135rem;
  color: rgba(223, 161, 236, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 0.14rem;
  margin-left: 0.075rem;
}

.image_2 {
  width: 0.37rem;
  height: 0.005rem;
  background: url(../assets/images/psqu180s9l33q42se7xm05v9nbb2g1mbcvc7934bc7-cde4-45a1-97d8-f8963fe650e4.png)
    0.005rem 0rem no-repeat;
  background-size: 0.375rem 0.01rem;
  margin: 0.06rem 0 0 0.115rem;
}

.button_1 {
  background-color: rgba(181, 108, 255, 1);
  border-radius: 44px;
  height: 0.44rem;
  width: 2.95rem;
  margin: 2.245rem 0 0 0.395rem;
}

.image-text_9 {
  width: 0.95rem;
  height: 0.19rem;
  margin: 0.125rem 0 0 1.01rem;
}

.group_3 {
  width: 0.155rem;
  height: 0.19rem;

  background-size: 0.21rem 0.21rem;
}

.text-group_1 {
  width: 0.735rem;
  height: 0.145rem;
  color: rgba(255, 255, 255, 1);
  font-size: 0.15rem;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 0.15rem;
  margin-top: 0.02rem;
}

.checkbox_1 {
  width: 0.12rem;
  height: 0.12rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pscnkmxhiia5bfppj8241rskg1j4uii4e2he9aa6a39-1306-4b9e-84cb-c9a970a201df)
    100% no-repeat;
  background-size: 100% 100%;
}
.button_4 {
  background-color: rgba(181, 108, 255, 1);
  border-radius: 40px;
  height: 0.4rem;
  width: 2.95rem;
  margin: 0.18rem 0 0 0.4rem;
}

.text_4 {
  width: 0.525rem;
  height: 0.13rem;
  color: rgba(255, 255, 255, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
  margin: 0.135rem 0 0 1.21rem;
}
</style>
